{% extends 'endbase.html' %}
{% block title %}
	博客成员
{% endblock %}
{% block head %}
    <link rel="stylesheet" href="{{ url_for('static',filename='cs/image.css') }}">
    <script src="{{ url_for('static',filename='js/image.js') }}"></script>
    <style>
    .small-container{
        margin-top: 20px;
        margin-bottom: 20px;
    }
    </style>
{% endblock %}

{% block body %}
    <!--模态框：新增成员-->
    <div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">

          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel3">新增成员</h4>
          </div>

          <div class="modal-body">
            <form action="#" class="form-horizontal" role="form">

              <!-- 用户名 -->
              <div class="form-group">
                <label for="membername" class="col-md-2 control-label">*用户名</label>
                <div class="col-md-9">
                  <input type="text" id="membername" name="membername" class="form-control" placeholder="请输入用户名">
                </div>
              </div>

              <!-- 邮箱 -->
              <div class="form-group">
                <label for="memberemail" class="col-md-2 control-label">*邮箱</label>
                <div class="col-md-9">
                  <input type="email" id="memberemail" name="memberemail" class="form-control" placeholder="请输入邮箱">
                </div>
              </div>
                <!-- 验证码 -->
              <div class="form-group">
                <label for="captcha" class="col-md-2 control-label">验证码</label>
                <div class="col-md-6">
                  <input type="text" class="form-control" name="captcha" placeholder="请输入验证码">
                </div>
                <div class="col-md-3">
                  <button type="button" class="btn btn-default btn-block" id="captcha-btn">获取验证码</button>
                </div>
              </div>

              <!-- 密码 & 确认密码 -->
              <div class="form-group">
                <label for="memberpassword" class="col-md-2 control-label">*密码</label>
                <div class="col-md-9">
                  <input type="password" id="memberpassword" name="memberpassword" class="form-control" placeholder="请输入密码">
                </div>
              </div>

              <div class="form-group">
                <label for="confirmpassword" class="col-md-2 control-label">*确认密码</label>
                <div class="col-md-9">
                  <input type="password" id="confirmpassword" name="confirmpassword" class="form-control" placeholder="请再次输入密码">
                </div>
              </div>

              <!-- 头像 & 职业 -->
              <div class="form-group">
                <label for="avatarCoverUpload" class="col-md-2 control-label">头像</label>
                <div class="col-md-3">
                  <label for="avatarCoverUpload" class="upload-box">
                    <div class="plus-icon"><i class="bi bi-plus-lg fs-1"></i></div>
                    <img id="preview" class="preview-image" src="{{ url_for('static',filename='images/1.jpg') }}" style="width: 80px;height: 80px">
                  </label>
                  <input type="file" id="avatarCoverUpload" name="picname" accept="image/*" style="display: none;" onchange="previewImage(this)">
                </div>
                <label for="memberjob" class="col-md-2 control-label">*职业</label>
                <div class="col-md-4">
                  <input type="text" id="memberjob" name="memberjob" class="form-control" placeholder="请输入职业">
                </div>
              </div>



            </form>
          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" id="submitmem" onclick="submitmember()">提交更改</button>
          </div>

        </div>
      </div>
    </div>



<div class="container" style="height: 100vh">
    <div class="row form-horizontal" style="margin: 10px 0 30px -15px ;">
            <form action="{{ url_for('auth.search_member') }}" method="post">
                <div class="form-group col-md-5">
                    <label for="username" class="control-label col-md-2 ">用户名</label>
                    <div class="col-md-10">
                        <input id="username" name="username" class="form-control" placeholder="用户名搜索" style="text-decoration: none;outline: none; font-size: 15px;" >
                    </div>
                </div>
                <div class="form-group col-md-5 job ">
                    <div class="col-md-12">
                        <label for="job" class="control-label col-md-2 ">职业</label>
                        <div class="col-md-10">
                            <input id="job" name="job" class="form-control" placeholder="职业搜索" style="text-decoration: none;outline: none; font-size: 15px;" >
                        </div>
                    </div>

                </div>

                <div class="form-group col-md-2 text-right">
                    <div class="col-md-12">
                        <button class="btn-danger btn" style="width: 80px" id="member" name="search" value="member">搜索</button>
                    </div>
                </div>
            </form>
    </div>

    <div class="row" style="margin-top: -25px;margin-left: 0">
        <button class="btn-danger btn add-member-btn" style="width: 100px;color: black">新增成员</button>
    </div>
    <div class="memberlist">
        <table class="table table-condensed">
            <thead>
                <tr>
                    <th class="col-md-1" >头像</th>
                    <th class="col-md-3">用户信息</th>

                    <th class="col-md-3">时间</th>
                    <th class="col-md-3">操作</th>
                </tr>
            </thead>
            <tbody>
                {% for member in members %}
                <tr>
                    <td>
                        {% if member.avatar %}
                        <img src="{{ url_for('static',filename=member.avatar) }} " style="width: 100px;height: 100px;">
                        {% else %}
                        <img src="{{ url_for('static',filename='images/1.jpg') }} " style="width: 100px;height: 100px;">
                        {% endif %}
                    </td>
                    <td>
                        <div class="small-container" style="margin-top: 20px;margin-bottom: 20px">
                            <div>用户名：{{ member.username }}</div>
                            <div>邮箱：{{ member.email }}</div>
                            <div>职业：{{ member.job }}</div>
                        </div>


                    <td>
                        <div class="small-container">
                            <div>加入时间：{{ user.join_time }}</div>
                            <div>更新时间：{{ user.update_time }}</div>
                        </div>
                    </td>
                    <td>
                        <div class="small-container"><a href="{{ url_for('auth.edit_member',member_id=member.id) }}">编辑</a> |
                            <a href="{{ url_for('auth.delete_member',member_id=member.id) }}">删除</a> |
                            <a href="{{ url_for('auth.disable_member',member_id=member.id) }}">禁用</a> |
                            <a href="{{ url_for('auth.update_password',member_id=member.id) }}">修改密码</a>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

</div>

<script>
document.querySelectorAll('.add-member-btn').forEach(function (btn) {
btn.addEventListener('click', function () {
    $('#myModal3').modal('show');
});
});
</script>
{% endblock %}